<template>
  角色权限
  <w-table
    :searchInputList="searchInputList"
    :searchToolBtn="searchToolBtn"
    :columns="columns"
    :operation="operation"
    :queryData="getRoleListApi"
  />
  <a-button @click="visible=!visible">打卡抽屉</a-button>
  <w-drawer v-model="visible" :title="'角色权限配置'" ref="wdrawer">
    <a-tree
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      checkable
      :tree-data="treeData"
    >
      <template #title="{ title, key }">
        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
        <template v-else>{{ title }}</template>
      </template>
    </a-tree>
  </w-drawer>
</template>

<script lang="ts" setup>
import { getRoleListApi } from '@/api/role/index'
import { useDrawerHook } from './hooks'

// 表格搜索区域的 输入框列表
const searchInputList = reactive<TableSearchInput[]>([
  {
    key: 'username',
    label: '用户名',
    type: 'input'
  },
  {
    key: 'status',
    label: '用户状态',
    type: 'select',
    list: [
      { label: '正常', value: '1' },
      { label: '禁用', value: '0' }
    ]
  }
])

// 表格搜索区域 额外按钮
const searchToolBtn = ref<TableTools[]>([
  {
    type: 'primary',
    label: '新建角色',
    condition: 'user:add', // 每一个用户都需要配置的权限标识
    handleClick: () => {
      console.log('点击了')
      visible.value = true // 点击新增时显示弹窗
    }
  }
])

// 表格的列字段 配置
const columns: TableColumnsType = [
  { title: '角色名称', width: 200, dataIndex: 'roleName', key: 'roleName' },
  { title: '备注', dataIndex: 'description', key: 'description' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 150
  }
]
// 表格的操作列
const operation = reactive<TableOperation[]>([
  {
    type: 'span',
    label: '授权',
    handleClick: (record: any) => {
      console.log('授权', record)
      visible.value = true // 点击编辑时显示弹窗
    }
  },
  {
    type: 'span',
    label: '编辑',
    handleClick: (record: any) => {
      console.log('编辑', record)
      visible.value = true // 点击编辑时显示弹窗
    }
  },
  {
    type: 'pop',
    label: '删除',
    message: '确认删除吗？',
    handleClick: (record: any) => {
      console.log('删除', record)
    }
  }
])

const visible = ref(false)

const treeData: TreeProps['treeData'] = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
          { title: 'leaf', key: '0-0-0-1' }
        ]
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ key: '0-0-1-0', title: 'sss' }]
      }
    ]
  }
]
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1'])
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1'])
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1'])
watch(expandedKeys, () => {
  console.log('expandedKeys', expandedKeys)
})
watch(selectedKeys, () => {
  console.log('selectedKeys', selectedKeys)
})
watch(checkedKeys, () => {
  console.log('checkedKeys', checkedKeys)
})

const wdrawer = ref()
const a = useDrawerHook(wdrawer)

</script>
